<template>
  <div class="userInfo-wrapper">
    <a-row :gutter="16">
      <a-col :span="5">
        <div class="left-box">
          <div class="title-box">
            <div class="in-box">
              <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />个人信息
              <a-icon type="edit" @click="handleEditUser" />
            </div>
          </div>
          <div class="accountInfo">
            <img :src="imgUrl" alt="" class="accountImg" />
            <div class="username">{{ accountInfo.userName }}</div>
            <div class="userRole">{{ accountInfo.roleName }}</div>
            <div class="userTigs">
              <div class="logo"><img src="@/assets/home/tel.png" />手机号</div>
              <div>{{ accountInfo.userAccount }}</div>
            </div>
            <div class="userTigs">
              <div>@ 邮箱</div>
              <div>{{ accountInfo.email }}</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="19">
        <div class="content">
          <div class="title-box">
            <div class="in-box">
              <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />
              <div class="title">
                <div
                  class="item"
                  v-for="item in titleData"
                  :key="item.id"
                  :class="[activeNum == item.id ? 'item-active' : '']"
                  @click="handleItem(item)"
                >
                  {{ item.title }}
                </div>
              </div>
              <a @click="handleBack">返回首页</a>
            </div>
          </div>
          <div class="tabel-box">
            <Record :userRole="userRole" v-if="activeNum == 1" />
            <UserMessage v-if="activeNum == 6" />
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="left-footer">
      <div class="logo"><img src="@/assets/home/tel.png" />+86-188-1133-7313</div>
      <div class="logo"><img src="@/assets/home/emil.png" />liuguangyusdu@outlook.com</div>
      <div class="logo"><img src="@/assets/home/book.png" />北京市西城区六铺炕北小街二号</div>
    </div>
    <MyModal :visible="userVisible" :width="550" :title="'编辑个人信息'" @handleCancel="handleCancel">
      <template #dialogBox>
        <UserInfo ref="myForm" :dataForm="dataForm" @cancel="handleCancel" />
      </template>
    </MyModal>
  </div>
</template>

<script>
import MyModal from '@/components/MyModal';

import { mapState } from 'vuex';
import { articlePage, dynamicPage, noticePage } from './components';
import Record from './Record';
import UserMessage from './UserMessage';
import UserInfo from './UserInfo';
import MyTouxiang from '@/assets/nav/user.gif';
import { getUserInfo, readFile } from '@/api/user.js';

export default {
  name: 'userInfo',
  components: { dynamicPage, articlePage, noticePage, Record, UserMessage, UserInfo, MyModal },

  data() {
    return {
      defaultTx: MyTouxiang,
      tabList: [
        {
          key: 'dynamicPage',
          tab: '动态'
        },
        {
          key: 'articlePage',
          tab: '文章'
        },
        {
          key: 'noticePage',
          tab: '通知'
        }
      ],
      currentKey: 'dynamicPage',
      dataForm: {},
      skillList: [
        {
          title: 'Vue',
          value: 95,
          status: 'active'
        },
        {
          title: 'Ant design vue',
          value: 75,
          status: 'active'
        },
        {
          title: 'Echarts',
          value: 60,
          status: 'active'
        },
        {
          title: 'ESLint',
          value: 100,
          status: 'success'
        },
        {
          title: 'Node',
          value: 100,
          status: 'exception'
        }
      ],
      tagList: [
        {
          title: '美食爱好者',
          color: '#1890FF'
        },
        {
          title: '学习',
          color: '#52C41A'
        },
        {
          title: '减肥',
          color: '#52C41A'
        },
        {
          title: '赚钱',
          color: '#1890FF'
        },
        {
          title: '进大厂',
          color: '#F5222D'
        }
      ],
      addInputShow: false,
      tagValue: '',
      activeNum: 1,
      titleData: [
        {
          id: 1,
          title: '工程数据库',
          key: '1'
        },
        {
          id: 2,
          title: '数字设计'
        },
        {
          id: 3,
          title: '数值模拟'
        },
        {
          id: 4,
          title: '智能制造'
        },
        {
          id: 5,
          title: '智慧运营'
        },
        {
          id: 6,
          title: '用户管理',
          key: '6'
        }
      ],
      userVisible: false,
      imgUrl: '',
      userRole: 0 // 0 无权限 (普通用户) 1 一般权限(中级用户 高级用户) 2 审核权限(审核人员) 3全部权限(高级管理员)
    };
  },
  computed: {
    ...mapState({
      accountInfo: state => state.user.accountInfo
    })
  },
  created() {
    this.currentKey = this.$route.params.key || 'dynamicPage';
  },
  mounted() {
    this.getRole();
    this.getImgUrl();
  },
  methods: {
    // 获取角色列表
    getRole() {
      getUserInfo().then(res => {
        this.userRole =
          res.data.roleId == '061b269d85c748bdbca2e8a866b5afaf'
            ? 3
            : res.data.roleId == '08323e00758146f0b19d5c1d26fd9eed'
            ? 2
            : res.data.roleId == '8f085695e4104d3d9a9ea8347af2f43b'
            ? 1
            : res.data.roleId == 'a77da3535b084bb285a69889efd11bd6'
            ? 1
            : res.data.roleId == 'ec48bae4b7d84f3b8982b14cf6c36ac0'
            ? 0
            : 0;
      });
    },
    changeTab(key) {
      this.currentKey = key;
    },
    getImgUrl() {
      if (this.accountInfo.portrait && this.accountInfo.portrait != '') {
        readFile(this.accountInfo.portrait).then(res => {
          this.imgUrl = res.data;
        });
      } else {
        this.imgUrl = MyTouxiang;
      }
    },

    inputConfirm() {
      const value = this.tagValue.trim();
      let tagList = this.tagList;
      if (value && this.tagList.findIndex(item => item.title == value) == -1) {
        tagList = [...tagList, { title: value, color: '#1890FF' }];
      }
      Object.assign(this, {
        tagValue: '',
        tagList: tagList,
        addInputShow: false
      });
    },
    writeInput() {
      this.addInputShow = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    handleItem(item) {
      if (!item.key) return this.$message.info('该模块暂未开发');
      if (item.id == 6 && this.userRole != 3) {
        return this.$message.error('当前用户没有权限');
      }
      this.activeNum = item.id;
    },
    handleEditUser() {
      this.dataForm = JSON.parse(JSON.stringify(this.accountInfo));
      this.userVisible = true;
    },
    handleCancel(type) {
      if (type == true) {
        getUserInfo().then(res => {
          this.$store.dispatch('user/updateInfo', res.data);
          this.userRole =
            res.data.roleId == '061b269d85c748bdbca2e8a866b5afaf'
              ? 3
              : res.data.roleId == '08323e00758146f0b19d5c1d26fd9eed'
              ? 2
              : res.data.roleId == '8f085695e4104d3d9a9ea8347af2f43b'
              ? 1
              : res.data.roleId == 'a77da3535b084bb285a69889efd11bd6'
              ? 1
              : res.data.roleId == 'ec48bae4b7d84f3b8982b14cf6c36ac0'
              ? 0
              : 0;
          this.getImgUrl();
        });
      }
      this.$refs.myForm.resetFields();
      this.dataForm = {};
      this.userVisible = false;
    },
    handleBack() {
      this.$router.push({
        path: '/index'
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.left-footer {
  position: absolute;
  bottom: 8px;
  left: 24px;
  color: #fff;
  font-size: 16px;

  .logo {
    display: flex;
    align-items: center;
    margin: 8px 0;
    img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
}
.accountInfo {
  margin-top: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding-bottom: 24px;

  .accountImg {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }
  .username {
    font-weight: 500;
    font-size: 1.7rem;
    margin: 12px 0 3px 0;
  }
  .userRole {
    font-size: 16px;
    padding: 5px 16px;
    background-color: rgba(22, 102, 240, 0.2);
    margin-bottom: 12px;
  }
  .userTigs {
    font-size: 16px;
    margin-top: 12px;
    width: 90%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    background: rgba(22, 102, 240, 0.2);
    padding: 0 12px;

    .logo {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.major-wrapper {
  margin-bottom: 5px;
  .major-name {
    margin-left: 10px;
  }
}
.skill-wrapper {
  margin-bottom: 10px;
}
.left-box {
  background-color: rgba(22, 102, 240, 0.2);
  color: #fff;
}
.title-box {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding: 4px 8px;
  background: rgba(22, 102, 240, 0.2);
  margin-top: 8px;
  margin-bottom: 4px;
  border-radius: 4px;

  .in-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background: linear-gradient(90deg, rgba(22, 102, 240, 0.2) 0%, rgba(59, 150, 255, 0) 100%);
    padding-left: 16px;
    .jiao {
      position: absolute;
      left: -5px;
      top: -5px;
      width: 20px;
      height: 20px;
    }
    .img {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.content {
  height: calc(100vh - 124px);
  border-left: 1px solid rgba(22, 102, 240, 0.2);

  .title {
    display: flex;
    .item {
      padding: 0 32px;
      border-right: 1px solid rgba(255, 255, 255, 0.6);
      font-size: 20px;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 400;
      cursor: pointer;
    }
    .item-active {
      color: #1666f0;
    }
    .item:first-child {
      padding-left: 0;
    }
    .item:last-child {
      border-right: none;
    }
  }
  .tabel-box {
    width: 100%;
    height: calc(100% - 28px);
  }
}
</style>
